<template>
  <div
    class="footer_control"
    v-if="tracks"
    @click="$router.push({ name: 'songPlayDetail' })"
  >
    <div class="music_img">
      <img :src="tracks[playCurrentIndex].al.picUrl" alt="" />
    </div>
    <div class="music_name">{{ tracks[playCurrentIndex].al.name }}</div>
    <div class="icon_123">
      <div class="play_btn" @click.stop="bf">
        <svg
          class="icon"
          aria-hidden="true"
          v-if="!$store.state.audioInfo.isPlay"
        >
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-else>
          <use xlink:href="#icon-zanting"></use>
        </svg>
      </div>
      <div class="gedan_list">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liebiao"></use>
        </svg>
      </div>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${tracks[playCurrentIndex].id}.mp3`"
    ></audio>
  </div>
</template>

<script>
import { mapState, mapMutations, useStore } from "vuex";
import { Toast } from "vant";
import { ref, onMounted } from "vue";
export default {
  name: "footerControl",
  components: { Toast },
  computed: {
    ...mapState(["tracks", "playCurrentIndex"]),
  },
  setup() {
    const store = useStore();
    let audio = ref(null);
    let isPlay = ref(false);
    const bf = () => {
      console.log(audio.value);
      if (audio.value.paused) {
        try {
          isPlay.value = true;
          audio.value.play();
          store.commit("setPlay", true);
        } catch (error) {
          Toast.fail("歌曲暂不支持播放");
        }
      } else {
        audio.value.pause();
        isPlay.value = false;
        store.commit("setPlay", false);
      }
    };
    onMounted(() => {
      // console.log('点我，全局是不同的歌曲',audio.value);

      if (store.state.audioInfo.isPlay) {
        audio.value.play();
      } else {
        audio.value.pause();
      }
      store.commit("setAudio", audio.value);
    });
    return {
      audio,
      bf,
      isPlay,
    };
  },
};
</script>

<style lang="less" scoped>
.footer_control {
  padding: 5px;
  position: absolute;
  bottom: 0px;
  width: 6.5rem;
  left: 25px;
  height: 50px;
  // background-color: pink;
  display: flex;
  align-items: center;

  .music_img {
    width: 12%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .music_name {
    width: 63%;
    height: 100%;
    line-height: 40px;
  }
  .icon_123 {
    width: 25%;
    height: 100%;
    display: flex;
    & > div {
      width: 50%;
      height: 100%;
      // border: 1px solid black;
    }
  }
}
</style>